<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <title>清单管理板块</title>
</head>

<body>
    <div id="app" v-cloak>
        <div class="title">
            <div style="padding: 5px;">
                清单名称<el-input v-model="page.value1" style="width: 200px; margin:0 10px; "
                    placeholder="请输入清单名称"></el-input>
                <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
                <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="reset">重置</el-button>
                <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>添加</el-button>
            </div>
        </div>
        <div class="body">
            <div class="right">
                <el-tabs v-model="page.activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="first">
                        <template #label>
                            <div
                                style="width: 10px;height: 10px;background: linear-gradient(to right, #67C23A, #E6A23C, #F56C6C); margin-right: 10px;">
                            </div>
                            全部
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="审核中" name="second">
                        <template #label>
                            <div style="width: 10px;height: 10px;background-color: #E6A23C; margin-right: 10px;"></div>
                            审核中
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="通过" name="third">
                        <template #label>
                            <div style="width: 10px;height: 10px;background-color: #67C23A; margin-right: 10px;"></div>
                            通过
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="拒绝" name="fourth">
                        <template #label>
                            <div style="width: 10px;height: 10px;background-color: #F56C6C; margin-right: 10px;"></div>
                            拒绝
                        </template>
                    </el-tab-pane>
                </el-tabs>
                <el-table id="table" border show-overflow-tooltip
                    :data-options="JSON.stringify({ 'TableName': 'list_management','primary_key':'List_Management_SerialNumber'})"
                    height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
                    @selection-change="handleSelectionChange">
                    <el-table-column fixed="left" align="center" label="标识" width="60">
                        <template v-slot="{row}">
                            <div style="width: 100%; display: flex; justify-content: center;">
                                <div :style="{backgroundColor:row.Row_Status=='0'?'#67C23A':row.Row_Status=='2'?'#E6A23C':row.Row_Status=='3'?'#F56C6C':''}"
                                    style="width: 10px;height: 10px;border-radius: 50%;"></div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
                        :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                        <template v-slot="{row}">
                            <div v-if="isValueType(row[column.COLUMN_NAME])=='image'">
                                <el-image style="width: 100px; height: 100px" :src="photo + row[column.COLUMN_NAME]"
                                    fit="contain"></el-image>
                            </div>
                            <template v-else>
                                {{row[column.COLUMN_NAME]}}
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column width="90" fixed="right" align="center" label="状态">
                        <template v-slot="{row}">
                            <el-tag
                                :type="row.Row_Status=='0'?'success':row.Row_Status=='2'?'warning':row.Row_Status=='3'?'danger':''">{{row.Row_Status=='0'?'通过':row.Row_Status=='2'?'审核中':row.Row_Status=='3'?'拒绝':''}}</el-tag>
                            <el-tag v-if="row.Is_Upload == '1'" type="success">已上传</el-tag>
                            <el-tag v-if="row.Is_Record == '1'" type="success">已备案</el-tag>
                            <el-tag v-if="row.Is_Publish == '1'" type="success">已公示</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="150" align="center">
                        <template #default="{row}">
                            <div style="display: flex; align-items: center;">
                                <el-button style="margin-right: 10px;" size="small" @click="handleEdit(row)">
                                    编辑
                                </el-button>
                                <el-dropdown trigger="click">
                                    <el-button type="danger" size="small">
                                        更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                    </el-button>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item v-if="row.Row_Status == '0'||row.Row_Status == '3'"
                                                @click="handle1(row,'2')">
                                                重新审核
                                            </el-dropdown-item>
                                            <el-dropdown-item v-if="row.Row_Status == '2'" @click="handle1(row,'0')">
                                                通过
                                            </el-dropdown-item>
                                            <el-dropdown-item v-if="row.Row_Status == '2'" @click="handle1(row,'3')">
                                                拒绝
                                            </el-dropdown-item>
                                            <el-dropdown-item @click="handle2(row)">
                                                {{row.Is_Upload == '0'?'确认上传':'取消上传' }}
                                            </el-dropdown-item>
                                            <el-dropdown-item @click="handle3(row)">
                                                {{row.Is_Record == '0'?'确认备案':'取消备案' }}
                                            </el-dropdown-item>
                                            <el-dropdown-item @click="handle4(row)">
                                                {{row.Is_Publish == '0'?'确认公示':'取消公示' }}
                                            </el-dropdown-item>
                                            <el-dropdown-item @click="handleDelete(row)">
                                                删除
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>

                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="margin-top: 1%;" :current-page="page.PageNumber" :page-size="page.RowAmount"
                    :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
                    :total="Total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
        <el-dialog v-model="showDialog" width="550" class="custom-dialog">
            <template #header>
                <div class="dialog-header">
                    <span>设置显示字段</span>
                </div>
            </template>
            <div class="dialog-content">
                <el-checkbox v-model="isAllChecked" @change="handleAllChecked"
                    class="full-width-checkbox">全选</el-checkbox>
                <div class="checkbox-columns">
                    <el-checkbox-group v-model="checkedFields" style="width: 100%; display: flex; flex-wrap: wrap">
                        <el-checkbox :disabled="field.COLUMN_KEY === 'PRI'" v-for="field in fields" :key="field"
                            :value="field" style="width: 50%; height: 30px; margin-right: 0px">
                            {{ field.COLUMN_COMMENT }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
                    <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="js/index.js"></script>
</body>

</html>